<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import '@wangeditor/editor/dist/css/style.css'; // 引入 css

// Props：使用属性，子组件接收父组件传递的内容
const props = defineProps({
  // 内容
  content: { type: String, default: '' },
  // 工具栏是否显示，默认显示
  showToolbarFlag: { type: Boolean, default: true },
  // 编辑器高度，默认500px
  editorHeight: { type: String, default: '500px' },
  // 编辑器是否只读，默认可编辑
  readOnlyFlag: { type: Boolean, default: false }
});
// 内容 HTML
const valueHtml = defineModel<string>('value', { required: true });
// Emits：使用事件，将子组件内容传递给父组件。父组件使用 update(content: string)
const emit = defineEmits<{ (e: 'update', content: string): void }>();

const mode = ref('default');

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

const toolbarConfig = {};

const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {} as any
};

// 上传图片配置
editorConfig.MENU_CONF.uploadImage = {
  // form-data fieldName ，默认值 'wangeditor-uploaded-image'。传给后端接口的参数名，重要!
  fieldName: 'file',
  server: 'http://localhost:8080/files/wangEditorUpload'
};

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！

  // 根据父组件传递的readOnlyFlag，设置编辑器为只读
  if (props.readOnlyFlag) {
    editorRef.value.disable();
  } else {
    editorRef.value.enable();
  }
};

const handleChange = () => {
  valueHtml.value = editorRef.value.getHtml();
  emit('update', valueHtml.value);
};

// 监听 props 变化，监听父组件传来的content
watch(
  () => props.content,
  (newVal: string) => {
    nextTick(() => {
      if (editorRef.value) {
        // console.log(" 当前编辑器的状态：", editorRef.value);

        // 富文本编辑器按 html 格式回显
        editorRef.value.setHtml(newVal);
        valueHtml.value = newVal;
      }
    });
  }
);

onMounted(async () => {
  await nextTick(); // 延迟渲染，确保 DOM 更新完成
  if (props.content) {
    valueHtml.value = props.content;
  }
});

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor === null) return;
  editor.destroy();
});
</script>

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      v-if="showToolbarFlag"
      :editor="editorRef"
      :default-config="toolbarConfig"
      :mode="mode"
      style="border-bottom: 1px solid #ccc"
    />
    <Editor
      v-model="valueHtml"
      :default-config="editorConfig"
      :mode="mode"
      :style="{ height: editorHeight, overflowY: 'hidden' }"
      :read-only="readOnlyFlag"
      @on-created="handleCreated"
      @on-change="handleChange"
    />
  </div>
</template>
